<template>
  <div class="swiper">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="key in swiperImgs"><img :src="key.bannerUrl" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import Swiper from 'swiper/dist/js/swiper';

  export default {
    name: "swiper",
    data() {
      return {
        swiperImgs:[],
        swiper: '',
      }
    },

    methods:{
      initSwiper() {
        this.swiper = new Swiper('.swiper-container', {
          /* direction: 'vertical', // 垂直切换选项*/
          loop: true, // 循环模式选项
          speed: 900,
          autoplay: {
            delay: 3000, //3秒切换一次
            disableOnInteraction: false
          },
          observer: false,//修改swiper自己或子元素时，自动初始化swiper
          observeParents: false,//修改swiper的父元素时，自动初始化swiper
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
        });
      }
    },
    mounted() {
      this.$api.swiper().then((data) => {
        console.log(data);
        if(data && data.data.code=== 10020){
          this.swiperImgs = data.data.data;
          console.log(this.swiperImgs);
          this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            this.initSwiper();
          });
        }
      });
    }
  }
</script>

<style lang="scss">
  .swiper>.swiper-container {
    width: 100vw;
    height: 300px;
  }
  .swiper-slide img {
    width: 100vw;
    height: 300px;
  }
</style>
